<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-24 13:32:40
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 14:26:39
-->
<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <div class="gray">每个类目最多仅设置3个热销品牌</div>
        <div class="brand" v-for="item in typeList" :key="item.id">
          <div class="brand-left">
            <div><img class="img" :src="item.coverPic" alt="" /></div>
            <div class="name">{{ item.name }}</div>
          </div>
          <div class="brand-right">
            <a-space wrap>
              <a-popconfirm
                title="您是否删除该品牌?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDel(item)"
              >
                <CloseCircleFilled :style="iconStyle" />
              </a-popconfirm>
            </a-space>
          </div>
        </div>
        <a-button
          block
          size="middle"
          @click="handleAdd"
          v-if="typeList.length < 3"
        >
          <template #icon>
            <PlusOutlined />
            选择品牌
          </template>
        </a-button>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
    <typesList ref="typeListRef" @chooseType="chooseType" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getHotBrandByTypeId,editHotBrand } from "@/api/goodConfig.js";
import typesList from "./typesList.vue";
const iconStyle = ref({
  color: "#ccc",
});
const modalOpen = ref(false);
const title = ref("编辑热销品牌");
const typeId = ref('')
const open = (record) => {
    typeId.value = record.typeId
  getBrandByTypeIdList(record.typeId);
  modalOpen.value = true;
};
const typeList = ref([]);
const getBrandByTypeIdList = async (typeId) => {
  const data = await getHotBrandByTypeId({ typeId: typeId });
  typeList.value = data.data.list;
};
const handleDel = (record) => {
  typeList.value = typeList.value.filter((item) => item.id !== record.id);
};
function handleCancel() {
  modalOpen.value = false;
}
// 查询品牌列表
const typeListRef = ref(null);
const handleAdd = () => {
  typeListRef.value.open(typeId.value);
};
// 选择
function chooseType(e){
    typeList.value.push(e)
}
// 提交
const emtis = defineEmits(['refreshList'])
const handleSubmit = async () => {
    const data = await editHotBrand({typeId:typeId.value,ids:typeList.value.map(item=>item.id)})
    if(data.code === 200){
        emtis('refreshList')
        modalOpen.value = false
    }
}
defineExpose({ modalOpen, open });
</script>
<style lang="less" scoped>
.gray {
  font-size: 14px;
  color: rgba(132, 132, 134, 1);
}
.brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(249, 249, 249);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  &-left {
    display: flex;
    align-items: center;
    .img {
      width: 24px;
      height: 24px;
      border-radius: 50px;
    }
    .name {
      margin-left: 10px;
    }
  }
  &-right {
    cursor: pointer;
  }
}
</style>
